<script setup lang="ts">
import { computed, inject } from "vue";
import useAddressStore from "@/pinia/modules/addressStore.ts";
import { showConfirmDialog, showFailToast, showSuccessToast } from "vant";
import type { Address } from "@/types/addressTypes";
const props = defineProps<{
    address: Address
}>();
const addressStore = useAddressStore();
const findAddressDetail = inject<any>("findAddressDetail");
/*是否为默认收货地址*/
const isDefaultAddress = computed(() => props.address.isDefault === 1);
/*删除地址的回调函数*/
const handleDelete = async () => {
    // 提示用户是否确认删除当前患者
    const dialog: "confirm" | "cancel" = await showConfirmDialog({ title: "温馨提示", message: `确认删除${props.address.receiver}吗?` }).catch(error => error);
    // 点击的是取消return出去不执行下面的逻辑
    if (dialog === "cancel") return;
    try {
        await addressStore.deleteAddress(props.address.id as string);
        await addressStore.fetchAddressList()
        showSuccessToast("删除地址成功");
    } catch (error: any) {
        showFailToast(error.message);
    }
};
/*编辑地址的回调函数*/
const handleEdit = async () => {
    await findAddressDetail(props.address.id);
    addressStore.changeShowPopup(true);
    addressStore.changeEdit(true);
};
</script>

<template>
    <div class="address-item">
        <div class="info">
            <span class="name">姓名:{{ address.receiver }}</span>
            <span class="fullAddress">地址:{{ address.addressDetail }}</span>
            <span class="mobile">手机号:{{ address.mobile }}</span>
        </div>
        <div class="icon">
            <svg-icon svg-name="edit" @click="handleEdit" />
        </div>
        <div class="icon">
            <svg-icon svg-name="close" @click="handleDelete" />
        </div>
        <div class="tag" v-if="isDefaultAddress">默认</div>
    </div>
</template>

<style scoped lang="scss">
.address-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--cp-bg);
    border-radius: 8px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid var(--cp-bg);
    transition: all 0.3s;
    overflow: hidden;

    .info {
        width: 90%;
        display: flex;
        flex-direction: column;

        span {
            color: #000000;
            margin-right: 20px;
            line-height: 30px;
        }
    }

    .icon {
        color: var(--cp-tag);
        width: 20px;
        text-align: center;
        margin-left: 10px;
    }

    .tag {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 16px;
        font-size: 10px;
        color: #fff;
        background-color: var(--cp-primary);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.selected {
        border-color: var(--cp-primary);
        background-color: var(--cp-plain);

        .icon {
            color: var(--cp-primary);
        }
    }
}
</style>
